アプリケーションのことをもっと理解するためにN予備校のプログラミングコースを走ってみた

こんにちは。AWS事業本部のKyoです。

最近の個人的なチャレンジとして、N予備校のプログラミングコースを走りきったのでまとめてみます。

N予備校のプログラミングコース is 何

N予備校（エヌよびこう）はドワンゴが提供するeラーニングサービス（インターネット予備校）である。主に学校法人角川ドワンゴ学園が運営するN高等学校の生徒向けに提供されているが、主要なコースは一般向けにも提供されている。

引用元: Wikipedia

今回はこのコースの1つである「プログラミング入門 Webアプリコース」を走りきりました。

ページ中段のコース一覧の中に学習内容の全量がまとまっています。

完全な未経験者向けのプログラミング入門講座です。 JavaScriptというプログラミング言語でセキュリティ上の問題のないWebサービスが開発できるようになります。他にも数値集計プログラム、Slackのボットなどを作成しながら、エディタやLinuxの開発環境などの基礎知識を身につけます。なお学習にはPCが必要です。

引用元: N予備校公式サイト

基礎から学びつつ様々な成果物を作って公開、最終的にはNode.jsのフレームワークであるExpressを用いて、予定調整アプリ（機能としては認証 + CRUD）を作成します。

完全未経験向けという謳い文句ですが、内容はかなりしっかり目です。JavaScriptはES6の機能を積極的に利用しますし、計算量の概念が出てきたり、テストを書いたりもします。Webに公開するものに関してはセキュリティまわりの実装もあります。とは言うものの、はじめはブラウザやエディタのインストールから始まるなど段階を踏んでいけるような構成になっています。

なお、お値段は月額 1,100円。これはN予備校全体でのお値段なので、大規模Web開発コースやWebデザインコースなども含まれています。内容から考えるととてもコストパフォーマンスが良いと思います。

なぜやるのか

もともと何かを作りたい気持ちはありました。AWSにハマったきっかけもレゴブロックのようにサービスを組合わせてシステムを構築するという発想に惹かれたからです。

一方で、前職が非エンジニアということもあり、Web開発を行った経験が豊富とは言い難い状態でした。キャッチアップのために読み漁った技術書等で点の知識はつけるも、体系的な知識・経験の不足は強く感じていました。結果、コードを書くこと自体は好きで、スクリプトをよく書いているものの、アプリケーションにはあまり踏み込めてない状態が続いていました。

また、同僚の影響もあると思います。元々アプリケーションエンジニアであった同僚と一緒に長期で対応している案件がり、その同僚からは自分にはない、かつ、お客様の課題に刺さる意見が出てくることは珍しくありません。都度学ばせてもらっていることはとてもありがたいのですが、もっと能動的にアプリケーション視点の発想を取り入れていきたい、という気持ちがありました。

そんな背景に加え、最近自分のロールの裁量と責任が増したこともあり、やってみるか、と動くことを決めました。

※ 以前参加したANGEL Dojoで多少コードは書いたものの、プロジェクトとチームの構成上、PM、PdM系の対応がメインでした。

やってみる

テキストベースで学習をすすめ、３週間ほどで走りきりました。時間にすると70時間程度です。普段のお仕事を比較対象にしてみると、それなりの規模の案件を詰め込んで短期集中でやる、といった軽くはないボリューム感でした。

各章について振り返ってみます。

第1章　はじめよう

Webプログラミングの基礎となるHTML、JavaScript、CSSを学びます。まとめとして、GitHub pagesを利用して、あなたのいいところ診断をWeb公開します。

あなたのいいところ診断

入力された名前を元に事前に準備した診断結果のパターンを返します。Webページの企画とデザインに対する考え方も解説されていたのがよかったです。また、シンプルながらテストも書きました。

第2章　準備しよう

Webアプリケーションのための環境構築を学びます。Linux基礎、ネットワーク基礎、というところですね。まとめとして、cronとシェルスクリプトでニコニコ動画のランキング情報を取得するボットを開発します。また、1章より応用的なGitHubの使い方も学び、プルリクエストを送ったりもします。

ここは馴染みのある領域でした。良かったと思うのが、Dockerを利用することです。ローカルでの環境構築に比べてハマりも減りますし、開発者視点でのDockerの使い方を知ることができました（以降の章でも利用します）。

第3章 サーバーサイドプログラミング入門

いよいよNode.jsを使ってサーバーサイドの開発を行います。大きく2つのテーマがあり、前半ではTODO管理を行うSlackボットを、後半では秘密の匿名掲示板を開発します。また、セキュリティについても手を動かしながら学びます。加えて、この章からは節ごとにGitHubの練習問題レポジトリをフォークして、正解のプルリクエストを送ることになります。

TODO管理を行うSlackボット

GitHub社製のボットフレームワークHubotを使ってTODO管理を行うSlackボットを作成します。Slackで特定のキーワードを発することで、TODOリストを表示したり、TODOを完了させる、といったことが出来ます。

これを通して、ライブラリや非同期処理、例外処理などより実践的なNode.jsの使い方を学びます。

ハマりどころとして定番中の定番ですが、非同期処理の理解がツラかったです。別のサイトなどを参照しつつ、タスクキュー、コールスタック、イベントループといった概念を整理することで腹落ちさせることができました。

連想配列ではない方のmap関数も登場します。初見だと急にレベルが上がったように感じるかもしれません。

秘密の匿名掲示板

IDとパスワードによる認証が必要な匿名掲示板を作ります。管理者機能も実装します。 これを通してHTTPの基礎やCookie、Basic認証、テンプレートエンジンなどを扱います。さらにデータの永続化のためにデータベース（PostgreSQL）とORM (Sequelize)にも触れます。

また、この掲示板はWeb公開（Herokuにデプロイ）するので脆弱性を学び実際にそれらを試します。具体的にはXSS、ブルートフォース、セッションハイジャック、CSRFなど、一度は教科書等で聞いたことがあるものばかりです。

（Herokuから削除していたので、ローカルのデータです。まんまと罠にかかりましたね、というメッセージはCSRFの実験の跡です）

学ぶことが一気に増えるとともに、利用のイメージがグッと持てるようになりました。 実装だけでなく、要件定義やUI、URI、モジュールの設計についての節があり、しっかりと説明されていたのが良かったです。

脆弱性についても、教科書等で学んだ際には無味乾燥だったものが自分で開発したアプリケーションに対して攻撃を行うことで「確かにこれは危険だ...!」という実感を得ることができました。

第4章　実践サーバーサイドプログラミング

より実践的なサーバーサイドの開発を行います。前半では、テスティングフレームワーク、継続的インテグレーション、クライアントのフレームワーク など実践で必要になる知識の概論を学びます。加えてリレーショナルデータベースのデータモデリングについても学びます。後半では総仕上げとして、スケジュール調整サービスである予定調整くんの開発を行います。

登場人物が今まで以上に増加する4章の前半に関しては、こういった概念が存在する・実際に使ってみるとこんな感じ、という理解に留めました。深堀りするとキリがないので、必要になったときに調べられる状態、といった感じですね。

予定調整くん

予定調整くんでは作られた予定に対してGitHubアカウントをもっている複数のユーザーが出欠を回答し、最も参加者の多い日程を決めることができます。これをNode.jsのフレームワークであるExpressで実装します。使用する技術も多く、これまで出てきた要素をほぼ全部のせ、といった感じです。

これまで以上にしっかりとした要件定義、設計を経て開発に入ります。フレームワークを利用した開発は、第3章が素のJavaScriptを使った開発だったからこそ見えてくるありがたみがありました。

開発全体を通して特に印象に残っているのは認証とデータベースです。

認証はアプリケーション全体の可用性に強く影響する重要度の高い仕組みです。ここを自前で持つのなら考えるべきことが増えるのですが、OAuthで外部の大手サービス（GitHub）へ外だしする設計になっているのは上手いなと思いました。

予定調整くんで扱うデータは基本的にデータベースに格納します。そこから欲しいデータをいかに効率よく取得できるかは、アプリケーションのコアとも言える部分だと感じました。実際、設計・開発においてもデータベースまわりは非常に存在感がありました。このあたり、Dynamo DB等のNoSQLデータベースの扱い方も気になるところです。

これらに対してJestを使ったテストをがっつり書くのも印象深いです。

完成した後はHerokuにデプロイします。無料枠でそれなりにアプリを動かせるのは便利だなと思いつつ、手慣れたAWSを使いたと思ったりもしました（DB費用...）。

モチベーションキープ

ボリュームのあるコースなので、モチベーションをキープする工夫を行いました。

全体像の把握

何かに取り組む際に終わりが見えないのはなかなかつらいものです。頻繁に目次を確認し、今自分がどのあたりにいるのか、常に意識するようにしていました。

また、「N予備校　プログラミング」のようなキーワードで検索すると受講の感想も見つかります。古いものもありますが、大筋は変わっていないようなので、どのあたりがつまづきやすいのかを把握することができました。

※ 細かい部分はアップデートされているようです。環境構築がVagrantからDockerになっていたり、扱うCIがCircleCIからGitHub Actionsになっていたり、というのが個人的には嬉しいポイントでした。

可視化

学んだことを雑多な学習メモにしてnotionのデータベースに放り込んでいました。データベースを利用することでこれまでの学習時間が簡単に可視化できます（時間の計測自体は人力です）。また時々カレンダービューで進捗具合を眺めてみたりもしました。

可視化という観点では、GitHubに草を生やすのも一つですね。前述の通り、第3章以降は練習問題をフォークしてプルリクエストを送るので、たくさんの草が生えることになります。

楽しむ

身も蓋もないのですが、やはり楽しいに勝るモチベーションはないと思います。学習をすすめるごとに色んなものが繋がっていく感覚と、新しく学んだことで何ができるのかを考えるのは非常に楽しい時間でした。

おわりに

本エントリではN予備校のプログラミングコースについて感想をまとめてみました。

振り返ってみるといい意味で枯れている（が、古すぎない）技術にどっぷり触れられました。枝葉の部分ではなく、幹に近い部分を学ぶことでアプリケーションレイヤ全体への解像度と基礎体力が上がったように感じています。

また、ES6以降のJavaScriptを体系的に学べたことで、関連技術の習得のハードルが下がったとも思います。TypeScriptやReactなどJavaScriptがベースになる技術は多数存在しますし、それらはAWSサービスにおいてもCDKやAmplifyなどでよく利用されています（JavaScriptをあまり理解しないままこのあたりに突撃して挫折する、はあるあるではないでしょうか）。この点も個人の興味と仕事の両方でプラスになったと考えています。

エンジニア語でいう「完全に理解した」までようやくたどり着いたので、引き続き精進していきたいと思います。